<template>
<div class="container">
  <div class="forget-div">
    <div class="step-div">
      <el-steps :active="active" finish-status="success">
        <el-step title="账户确认">
          <el-input placeholder="请输入邮箱"></el-input>
        </el-step>
        <el-step title="重置密码"></el-step>
        <el-step title="重置成功"></el-step>
      </el-steps>
    </div>
    <div class="form-div">
      <el-form :rules="rules" ref="confirm" :model="confirm">
        <el-form-item prop="email">
          <el-input
              @keyup.enter="next"
              v-model="confirm.email"
                    placeholder="请输入您的邮箱">
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="next-btn">
      <el-button @click="next" type="primary">确 认</el-button>
    </div>
  </div>
  <router-view></router-view>
  <div class="auth-div">
    <!--图片滑动验证-->
    <Vcode
        :imgs="imgs"
        :show="isShowAuth" @success="authSuccess" @fail="authFail" @close="closeRe"/>
  </div>
</div>
</template>


<script>
  import Common from "@/api/common"

  import Vcode from "vue3-puzzle-vcode"
  import img from "@/assets/img/auth/img.jpg"
  import img1 from "@/assets/img/auth/img1.jpg"
  import img2 from "@/assets/img/auth/img2.jpg"
  import img3 from "@/assets/img/auth/img3.jpg"
  import img4 from "@/assets/img/auth/img4.jpg"
  import img5 from "@/assets/img/auth/img5.jpg"
  import img6 from "@/assets/img/auth/img6.jpg"
  import img7 from "@/assets/img/auth/img7.jpg"

  export default {
    components: {
      Vcode
    },
    data() {
      let validateEmail = (rule, value, callback) => {
        if (!this.isEmail(value)) {
          callback(new Error('邮箱格式错误'))
        } else {
          callback()
        }
      }
      return {
        confirm: {
          email: null
        },
        email: null,
        active: 0,
        isShowAuth: false,
        imgs: [
          img, img1, img2, img3, img4, img5, img6, img7
        ],
        rules: {
          email: [
            {required: true, message: "请输入邮箱", trigger: "blur"},
            {validator: validateEmail, trigger: "blur"}
          ],
        }
      }
    },
    created() {

    },
    methods: {
      init() {

      },
      next() {
        if (null === this.confirm.email) {
          this.$message({
            type: 'warning',
            message: "请输入邮箱哦"
          })
        } else {
          // 验证机器人，滑动验证
          this.isShowAuth = true;
        }
      },
      /*滑动验证码 认证成功*/
      authSuccess() {
        console.log("认证成功")
        // 验证账号是否存在
        Common.checkEmail(this.confirm.email).then(response => {
          if (response.success) {
            // 通过验证后，手动隐藏模态框
            this.isShowAuth = false;
            // 页面跳转，携带邮箱信息（url 不显示）
            this.$router.push({name:'ResetPassword',params: {email: this.confirm.email}})
          } else {
            this.isShowAuth = false;
            this.$message({
              type: 'warning',
              message: '该邮箱未注册，请先注册'
            })
          }
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '发生未知错误'
          })
        })
      },
      authFail() {
        this.photoHua += 1;
        if(this.photoHua > 5){
          this.$message({
            message: '其实ψ(*｀ー´)ψ......你要是一直拼不成功，我会让你一直拼下去的哟...',
            type: 'warning'
          });
        }
      },
      //点击图片验证的背景部分事件
      closeRe(){
        this.$message({
          message: '请完成滑动验证，验证成功之后验证框会自动消失...(๑╹◡╹)ﾉ',
          type: 'warning'
        });
      },
      isEmail (s) {
        return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)
      }

    }
  }
</script>


<style scoped>
  .container {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../../../assets/img/login-bg.png);
    background-size: 100%;
  }
  .forget-div {
    position: absolute;
    left: 27%;
    top: 15%;
    width: 730px;
    height: 530px;
    border-radius: 28px;
    box-shadow:4px 4px 15px #6d6a6a;
    background: rgba(250, 250, 250, 0.98);
  }
  .step-div {
    width: 440px;
    position: absolute;
    top: 8%;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
  .form-div {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  .next-btn {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  .el-button {
    width: 200px;
  }
  .el-input {
    width: 360px;
  }

</style>